<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.content{
				width: 200px;
				height: 50px;
				background-color: aqua;
			}
			.animate{
				animation: move 1s linear;
			}
			.transition{
				transition: all 1s; 
			}
			@keyframes move {
				20%{
					transform: translateX(-10px);
				}
				40%{
					transform: translateX(10px);
				}
				60%{
					transform: translateX(-10px);
					
				}
				80%{
					transform: translateX(10px);
					
				}
				100%{
					transform: translateX(0px);
					
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="content" :class="className" @animationend="className.animate=false" :style="style"></div>
			<!-- <button @click="move($event)" ref="animation">动画</button> -->
			<change 
				:style="className"
				v-model:className="style"
				:style="style"
				v-model:style="style"
			>
			</change>
		</div>
	</body>
	
</html>
<script>
	const app=Vue.createApp({
		data(){
			return{
				className:{
					"animate":false,
					transition:true
				},
				style:{
					backgroundColor:"red"
				}
			}
		},
		methods:{
			// move(o){
			// 	console.log(o)
			// 	console.log(o.target)
			// 	console.log(o.target.getBoundingClientRect())
			// 	console.log(this.$refs);
			// 	this.className.animate=true
			// 	switch(this.style.backgroundColor){
			// 		case "red":
			// 			this.style.backgroundColor="blue";
			// 			break;
			// 		case "blue":
			// 			this.style.backgroundColor="red";
			// 			break;
			// 	}
			// }
		}
	})
	app.component("change",{
		props:[]
		template:"<button @click="move($event)" ref="animation">动画</button>",
		methods:{
			move(){
					console.log(o)
					console.log(o.target)
					console.log(o.target.getBoundingClientRect())
					console.log(this.$refs);
					this.className.animate=true
					switch(this.style.backgroundColor){
						case "red":
							this.style.backgroundColor="blue";
							break;
						case "blue":
							this.style.backgroundColor="red";
							break;
					}
			}
		}
	})
	const vm=app.mount('#app')
</script>